<template>
  <div class="all">
    <span class="sp1">
      <!-- <h1 style="text-align: center">图书管理</h1> -->
      <!-- <font size="5" color="white">图书管理</font> -->
      <el-row class="tac">
        <el-col class="boxs" :span="12">
          <h5></h5>
          <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-submenu class="box" index="1">
              <template slot="title">
                <i class="el-icon-s-tools"></i>
                <span style="color:white">一、首页</span>
              </template>
              <el-menu-item-group>
                <!-- 监听bookshow -->
                <el-menu-item index="1-1" @click="bookshow"
                  >全部图书</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu class="box" index="2">
              <template slot="title">
                <i class="el-icon-notebook-1"></i>
                <span style="color:white">二、图书</span>
              </template>
              <el-menu-item-group>
                <!-- 监听showDialog对话框 -->
                <el-menu-item index="1-1" @click="showDialog = true"
                  >增加</el-menu-item
                >
                <el-menu-item index="1-2" @click="show = true"
                  >编辑</el-menu-item
                >
                <el-menu-item index="1-3" v-show="show" @click="show = false"
                  >取消编辑</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu class="box" index="3">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span style="color:white">三、借阅</span>
              </template>
              <el-menu-item-group>
                <!-- 监听showuserbook事件    -->
                <el-menu-item index="1-1" @click="showuserbook"
                  >借阅详情</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu class="box" index="4">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span style="color:white">四、用户</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-2">用户资料</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </span>
    <span class="sp2">
      <!-- text用在块级元素，会使其包含的行内元素和行内块元素右对齐 -->
      <!-- font-size 字体大小 -->
      <el-header class="header" style="text-align: right; font-size: 15px">
        <!-- placeholder设置input文本框的提示信息 -->
        <!-- line-height 文本框行高 -->
        <!-- v-model传输数据到 search -->
        <input
          type="text"
          placeholder="请输入书名"
          v-model="search"
          style="font-size: 15px; line-height: 3"
        />
        <!-- 名为搜索的icon图标    -->
        <!-- 监听findname -->
        <el-button @click="findname" icon="el-icon-search">搜索</el-button>
        <el-dropdown>
          <!-- margin-right外右边距 -->
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <!-- 监听exit -->
              <span @click="exit">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>已登录</span>
      </el-header>
      <el-main>
        <el-table :data="tabledatas">
          <el-table-column prop="bookname" label="图书">
            <template slot-scope="scope">
                    <el-input placeholder="请输入图书" v-show="show" v-model="scope.row.bookname"></el-input>
                    <span v-show="!show">{{scope.row.bookname}}</span>
                </template>
          </el-table-column>
          <el-table-column prop="author" label="作者">
            <template slot-scope="scope">
                    <el-input placeholder="请输入作者" v-show="show" v-model="scope.row.author"></el-input>
                    <span v-show="!show">{{scope.row.author}}</span>
                </template>
          </el-table-column>
          <el-table-column prop="publisher" label="出版社">
            <template slot-scope="scope">
                    <el-input placeholder="请输入出版社" v-show="show" v-model="scope.row.publisher"></el-input>
                    <span v-show="!show">{{scope.row.publisher}}</span>
                </template>
          </el-table-column>
          <el-table-column label="操作">
            <!-- slot-scope插槽 -->
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                v-show="show"
                @click="updatebook(scope.$index, scope.row)"
                >保存</el-button
              >
              <el-button
                size="mini"
                type="success"
                v-show="usershow"
                @click="borrowbook(scope.$index, scope.row)"
                >借书</el-button
              >
              <el-button
                size="mini"
                type="danger"
                v-show="usershow"
                @click="deletebook(scope.$index, scope.row)"
                ><i class="el-icon-delete"></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </span>
    <el-dialog title="增加图书" :visible.sync="showDialog">
      <el-form :model="registerForm" ref="registerForm" label-width="100px">
        <el-form-item class="item" label-width="50px" prop="bookname">
          <label class="书名">书 名：</label>
          <el-input
            class="text"
            type="text"
            v-model="registerForm.bookname"
            placeholder="请输入图书"
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label-width="50px" prop="author">
          <label class="作者">作 者：</label>
          <el-input
            class="text"
            type="author"
            v-model="registerForm.author"
            placeholder="请输入作者"
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label-width="50px" prop="publisher">
          <label class="出版社">出版社：</label>
          <el-input
            class="text"
            type="publisher"
            v-model="registerForm.publisher"
            placeholder="请输入出版社"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="increase">确定</el-button>
      <el-button type="primary" @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="resetForm('registerForm')"
        >重置</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // return新对象
      tabledatas: [],
      userbooks: {
        username: "",
        bookname: "",
        author: "",
        publisher: "",
      },
      search: "",
      show: false,
      usershow: true,
      showDialog: false,
      showScri: false,
      registerForm: {
        bookname: "",
        author: "",
        publisher: "",
      },
    };
  },
  // 钩子函数
  created() {},
  methods: {
    // 退出登录
    exit() {
      this.$router.replace("/");
    },
    // 增加图书
    increase() {
      this.$axios
        .post("http://127.0.0.1:7001/api/book", this.registerForm)
        .then((res) => {
          if (res.data.data.code == 200) {
            this.$message.success({ message: "增加完成", center: true });
            this.showDialog = false;
            // this.tabledatas = res.data.res;
            this.bookshow();
          } else {
            this.$message.error({ message: "增加失败", center: true });
          }
        })
        .catch((error) => {
          this.$message.error({ message: "同名图书已存在", center: true });
          console.log(error);
        });
    },
    // 展示图书
    bookshow() {
      this.$axios.get("http://127.0.0.1:7001/api/book/show").then((res) => {
        // console.log(res, '展示')
        this.tabledatas = res.data;
        this.usershow = true;
      });
    },
    // 图书查找
    findname(bookname) {
      this.$axios
        .get("http://127.0.0.1:7001/api/book/findname?bookname=" + this.search)
        .then((res) => {
          if (res.data === "没有") {
            this.$message.error({ message: "没有数据", center: true });
          } else {
            this.$message.success({ message: "查找完成", center: true });
            this.tabledatas = res.data;
          }
        });
    },
    //删除图书
    deletebook(index, row) {
      this.$axios
        .delete("http://127.0.0.1:7001/api/book/delete?_id=" + row._id)
        .then((res) => {
          console.log(res);
          if (res.data.data.code == 200) {
            this.$message.success({ message: "删除成功", center: true });
            this.bookshow();
          } else {
            this.$message.error({ message: "删除失败", center: true });
          }
        });
    },
    // 修改图书
    updatebook(index, row) {
      console.log(row);
      this.$axios
        .put("http://127.0.0.1:7001/api/book/update?", row)
        .then((res) => {
          console.log(res);
          if (res.data.data.code == 200) {
            this.$message.success({ message: "修改完成", center: true });
            this.show = false;
            this.bookshow();
          } else {
            this.$message.error({ message: "修改失败", center: true });
          }
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //借书
    borrowbook(index, row) {
      // console.log(row, '11')
      this.$axios
        .post("http://127.0.0.1:7001/api/userbook/create", row)
        .then((res) => {
          console.log(res, "11");
          if (res.data.data.code == 200) {
            this.$message.success({ message: "借书完成", center: true });
          } else {
            this.$message.error({ message: "借书失败", center: true });
          }
        })
        .catch((error) => {
          this.$message.error({
            message: "您已经借了这本书了！",
            center: true,
          });
          console.log(error);
        });
    },
    // 借书展示
    showuserbook() {
      //  var username = sessionStorage.getItem("username");
      //  this.username=username;
      //  console.log(row);
      // console.log('借书');
      this.$axios
        .get("http://127.0.0.1:7001/api/userbook/finduserbook")
        .then((res) => {
          this.tabledatas = res.data;
          // console.log(res)
        });
    },
  },
  mounted() {
    this.bookshow();
  },
};
</script>

<style>
.all {
  /* background-image: url(../assets/mm.jpg); */
  /* background-size:100% 100%; */
  background-repeat: no-repeat;
  display: flex;
  /* 居中对齐弹性盒的各项 */
  align-items: center;
  /* 在弹性盒对象的 <div> 元素中的各项周围留有空白： */
  justify-content: center;
  height: 100%;
  /* background-color:aqua; */
}
.sp1 {
  height: 100%;
  width: 15%;
  background-color: rgb(14,22,41);
  /* background-image: url(../assets/rose.jpg); */
  /* opacity:0.4; */
}
.sp2 {
  height: 100%;
  width: 85%;
  /* background-color:blueviolet; */
  /* background-image: url(../assets/Drose.jpg); */
  background-size: 100% 100%;
}
.tac {
  width: 100px;
  height: 100px;
  opacity: 0.4;
  background-color: rgb(14,22,41);
}
.h1 {
  color: red;
}
.box {
  background-color: rgb(14,22,41);
}
.boxs {
width: 280px;
}
.header {
  background-color: #b3c0d1;
}
</style>